<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三栏布局</title>
</head>
<style>
  .clearfix::after{
    content: "";
    display: block;
    clear: both;
  }
  .container{
    background-color: lightblue;
    border: 1px solid;
    padding: 30px;
  }
  .left{
    margin-right: 20px;
    width: 300px;
    float: left;
    background-color: aqua;
  }
  .right{
    margin-left: 20px;
    width: 300px;
    float: right;
    background-color: cadetblue;
  }
  .main{
    overflow: hidden;
    border: 1px solid;
  }
</style>
<body>
  <div class="container clearfix">
    <div class="left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam in vitae laudantium quo quia pariatur cumque, sint est ratione, tempora saepe non sequi quisquam impedit magni sit labore quaerat, neque voluptatum placeat iure ipsam hic inventore. Error quasi commodi modi consectetur alias nam. Corrupti neque veniam labore fugit eius cumque dignissimos culpa quas et? Similique, maiores impedit! Possimus saepe ab impedit, aperiam dolorem beatae omnis, quos est blanditiis exercitationem quaerat reiciendis magni odio! Hic ipsum cupiditate nobis quidem. Nemo optio rem debitis excepturi doloremque modi ex nostrum, inventore nulla soluta ut voluptatum fugiat recusandae earum, magnam eligendi harum rerum consectetur non fuga perspiciatis temporibus magni distinctio. Ad vitae maiores officia consequuntur veritatis a distinctio. Quis quos dicta esse nihil laborum eos, autem rem porro laudantium! Enim, vitae ipsum, explicabo laudantium perspiciatis at iure velit deserunt quibusdam debitis recusandae sapiente? Temporibus nemo inventore eum voluptatum aliquam nobis, labore voluptates magni iste doloremque nulla quae accusamus sequi modi similique, dolore porro a nam dignissimos repudiandae in fuga cum, rem recusandae. Voluptates nesciunt tenetur maxime quidem eaque odio deserunt perspiciatis molestiae nobis rem. Iusto aperiam nemo quia, quis voluptates nihil. Id eos nihil obcaecati nemo dicta beatae consequatur modi aliquid unde eaque iure dolorum quisquam qui, labore asperiores deserunt! Enim harum laboriosam maiores dignissimos amet ratione omnis aperiam quaerat, hic molestias eaque, odio accusantium debitis at vero alias, atque id praesentium cum est modi nesciunt nam sapiente velit! Omnis iure natus, ex necessitatibus in excepturi. Eveniet aut aliquid nostrum debitis eligendi, fugiat voluptatem quisquam accusamus sapiente aspernatur ex eum quas nulla molestias doloribus nemo in iste ad repellendus, cum dolores. Illum beatae cum explicabo atque laboriosam qui iusto reprehenderit ratione necessitatibus, expedita eligendi iste! Repellat magnam excepturi cum, harum nihil doloremque ab atque? Quis architecto, aliquid, dolores asperiores rerum tempore id alias ducimus consectetur, ipsum aliquam. Enim porro sunt excepturi ipsum repellat quisquam nisi sit labore blanditiis pariatur ex earum quidem, hic illum consectetur reprehenderit harum eum. Libero sequi laudantium repellat est consequatur aperiam ipsa repudiandae asperiores. Porro accusantium perspiciatis accusamus illum sapiente officia quo amet. At rerum culpa doloremque earum iusto asperiores dolor necessitatibus consectetur. Alias ex assumenda voluptas obcaecati debitis ipsum repellat hic rerum quibusdam esse non a, magni voluptates porro ducimus quis id facere fugit molestiae quos velit nam eligendi doloremque. Aliquam et praesentium voluptas expedita quas maiores ea natus perferendis, voluptatum minima quae, cumque commodi, recusandae repellendus? Obcaecati expedita, eum ipsa provident nemo incidunt iste, odit facilis, voluptate explicabo accusamus atque odio excepturi velit commodi beatae corporis? Magnam quod, eum nostrum cum animi distinctio quis dolore accusantium ullam officiis? Porro quisquam voluptas officiis quibusdam vitae officia veritatis accusamus assumenda explicabo facilis, illum, nobis maiores eligendi, iusto voluptatum veniam nesciunt. Quibusdam, placeat. Nihil similique earum cumque eos nobis quos perferendis quibusdam quidem quae dolorem obcaecati incidunt eaque ratione fugiat amet, quasi vero iure? Excepturi a quo beatae ab eaque quaerat. Facere, recusandae illum veniam necessitatibus quidem obcaecati dolor iusto. Aperiam officia minima veniam excepturi impedit suscipit dolore facilis nihil laudantium.</div>
    <div class="right">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus nostrum ex, deleniti accusamus eum aut nesciunt quibusdam eligendi soluta fuga, nobis corporis distinctio asperiores beatae aperiam officia sit vero labore ullam. Tenetur aperiam eius rem? Cum hic in doloremque sit, autem saepe necessitatibus suscipit libero nihil obcaecati minima, voluptatum dolorem tenetur quisquam corporis a error quis illo voluptatibus cupiditate distinctio ullam delectus pariatur! Accusantium hic facilis dolor animi quod nemo distinctio expedita quas vel dolorum? Labore porro ratione impedit provident nam, harum dolor nobis. Deserunt ratione unde ab, esse molestiae quidem voluptatem sint error cupiditate? Voluptate dolore aut natus doloribus dicta. Consequuntur suscipit obcaecati voluptate? Veniam et alias blanditiis. Quidem tempora perspiciatis aut. Sunt veniam quibusdam enim quas totam natus beatae, assumenda id facilis eligendi possimus dicta harum, fugit porro, exercitationem nesciunt? Dolorem sequi assumenda vero voluptas earum reiciendis repellendus voluptate accusantium. Provident totam animi at molestiae praesentium esse consequuntur. Illum quasi eveniet temporibus vero veritatis eius quisquam. Dolorum deserunt adipisci dolores nulla in aut vero eaque dignissimos cum facere alias animi qui assumenda ab natus consequatur eligendi, voluptate quod praesentium maiores ducimus soluta accusamus. Quaerat quo officia cum distinctio nihil, assumenda praesentium esse similique voluptates eveniet ipsam sint labore explicabo quos consequatur magni iusto tempora suscipit. Voluptatum nostrum esse dolores eveniet fugiat repellat alias aliquam deserunt modi debitis nemo quisquam culpa, fugit magnam provident cum cupiditate error eius temporibus repellendus doloribus obcaecati fuga. Ad voluptates eius dolorem, repellat animi temporibus sed facilis facere deleniti vel quisquam cumque quod? Cum delectus hic quod aperiam. Nemo magni blanditiis quas ipsum mollitia sunt, dicta modi sequi eaque nisi sit cumque. Fugit commodi nisi, perspiciatis quod libero sed quas! Nemo, ut alias repudiandae necessitatibus quaerat earum architecto quasi neque optio quam dicta fuga molestiae ab accusamus, eius quo cum aperiam et sequi nam? Laborum labore ducimus natus consequuntur officiis, recusandae dolore necessitatibus assumenda incidunt harum nulla ea sequi dolorem optio excepturi expedita ipsa sed, illo, perferendis dolor unde. Eaque, necessitatibus neque. Aperiam molestias quae minus ratione quisquam? Enim in corrupti, ea consectetur corporis eius totam. Iusto, aliquam facilis reiciendis placeat dolorum, rem illum, aperiam pariatur sapiente labore quam eaque temporibus. Libero quasi excepturi eligendi quis soluta, in, quam exercitationem quisquam nisi doloribus a cupiditate ullam quod consectetur et voluptatum maiores itaque at! Rerum, soluta. Quod quaerat iste dolor vitae, nisi explicabo cumque et delectus asperiores quasi ut similique neque cum nemo assumenda eaque adipisci sunt praesentium fugit. Libero fugiat dolor adipisci quisquam, eligendi vel obcaecati repudiandae quibusdam molestias enim tempora nulla atque exercitationem quia ullam numquam quasi blanditiis qui, odit commodi? Vero asperiores ab distinctio voluptates aliquid obcaecati ut possimus ipsa, commodi incidunt quas ipsum expedita debitis dolorem consectetur velit laborum nesciunt veritatis assumenda culpa tempore. Deserunt suscipit sint voluptatem numquam eius, incidunt reprehenderit ab itaque at quos blanditiis recusandae debitis excepturi impedit laudantium illo tenetur a molestiae eum placeat. Quae labore assumenda error vero reprehenderit perspiciatis architecto modi nulla suscipit quibusdam enim ex quo soluta perferendis fugit aut, numquam nostrum blanditiis sit.</div>
    <div class="main">
      <p>
        <b>三栏布局，浮动元素要写再前面。为什么？？因为块盒无视浮动元素，浮动元素不无视块盒</b>
      </p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt dolor adipisci necessitatibus est alias debitis magnam tempora earum perspiciatis, esse, nesciunt consectetur? Expedita, veritatis ducimus adipisci perferendis eum necessitatibus aliquam, quis ipsam alias repellat culpa, veniam earum? Laboriosam fugit possimus eos accusantium a blanditiis praesentium nisi voluptatum, debitis voluptatem doloremque iusto voluptatibus aliquid eligendi obcaecati excepturi iure perspiciatis! Perferendis sit at libero dignissimos soluta voluptatum cupiditate obcaecati adipisci modi, blanditiis nobis, eius earum sunt velit excepturi? Neque deserunt quaerat iure dolorum non quas facilis repellendus laborum quis. Nisi ducimus porro quasi dolore quibusdam quis, iste sit dolores dolorum quisquam esse nihil maxime, necessitatibus laudantium quod voluptate, vitae eveniet temporibus? Dolorum vel velit in? Cupiditate consectetur tempora aut quae facilis, maiores odit rerum ut! Saepe reprehenderit, illum perspiciatis itaque iure soluta quaerat cum, voluptatem veniam aut voluptatum at delectus eveniet animi quae! Pariatur consequatur illum iusto dignissimos officiis aut quas autem possimus maxime amet repellendus nesciunt expedita, perferendis odit explicabo facere enim, ea odio vero aliquid a culpa dolorum? Praesentium voluptatibus odio dolore aliquid qui! Cumque, consequatur. Amet eius neque quasi! Veniam eius quia eligendi, sint, ducimus consequatur fugiat voluptatum animi asperiores, voluptatibus odio autem tempore expedita. Perspiciatis, optio consequuntur ullam repellendus enim recusandae eum sapiente alias perferendis quaerat veritatis et eveniet temporibus at quisquam culpa autem officiis? Reiciendis assumenda dolore rem ullam, iure molestias quidem repellendus est non, eligendi placeat ab veniam error in nemo velit quos doloribus rerum. Porro assumenda vitae temporibus quisquam minima fugiat repellat minus a et. Vitae animi, suscipit sapiente eveniet aut error repellendus possimus nesciunt excepturi optio id laboriosam consequuntur facilis, nemo pariatur nostrum temporibus voluptatibus dolores! Sequi dolores reiciendis dignissimos, incidunt veniam, ratione soluta inventore quod ipsa dicta quia dolorem explicabo voluptate quam iusto eaque at libero sunt! Nemo ratione quam praesentium deleniti commodi dolor, doloribus blanditiis non porro nobis reprehenderit illum quibusdam quaerat rerum voluptas eligendi, totam cum culpa error eaque architecto pariatur vel nulla. Sit est, sunt eveniet id veniam totam, magni debitis similique asperiores exercitationem sapiente voluptatibus commodi corporis libero et nobis. Dignissimos libero minima voluptas modi sint ea incidunt eligendi cumque ullam perspiciatis, consequuntur, rem quis assumenda maxime. Consequatur officiis nulla, sapiente deserunt possimus sequi, provident, reprehenderit molestias ab recusandae culpa? Fuga, voluptatibus iure? Quasi praesentium nobis ratione. Aperiam esse maxime soluta quisquam vel, cum laudantium architecto eum, nihil ullam distinctio ipsum ipsam optio dignissimos fuga. Cupiditate voluptate qui labore recusandae neque adipisci corrupti iusto sequi, necessitatibus alias consequatur deleniti blanditiis, inventore quas, dolore maxime laudantium dolorem modi? Dolorum quibusdam est ab veniam quod! Accusamus ab quis facere natus voluptates tenetur repudiandae necessitatibus quod quas quibusdam placeat incidunt, repellat obcaecati? Culpa laudantium ab aut aperiam ipsam quod dolor ad, quis suscipit architecto, optio non blanditiis velit provident animi expedita vitae deleniti doloribus recusandae veritatis iure debitis cumque hic quo. Corrupti blanditiis nemo itaque facere culpa laudantium iusto dolores assumenda sunt neque omnis, nisi magnam aperiam sed voluptas earum iure cumque rerum aliquid fugiat. Sit architecto, ipsa veritatis iste quod assumenda.</div>
  </div>
</body>
</html>